<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import xtpzService from '@/api/xtpz'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useMainStore } from '@/store/main'
import { JnmlOutputDTO, getJnmlInputDTO } from '@/api/xtpz-dto'

const emit = defineEmits(['refresh'])

const route = useRoute()
const store = useMainStore()

// 入参

// 生命周期
onMounted(() => {
  //
})

/*
 * 查询模板列表
 */
const queryMb = async () => {
  try {
    const params = {
      ajlbbm: route.query.ajlbbm as string,
    }
    const res = await xtpzService.getQueryMlmb(params)
    tableData.value = res.data
  } catch (err: any) {
    !err.isError && ElMessage({ type: 'warning', message: err.message })
  }

  // xtpzService
  //   .getQueryMlmb(params)
  //   .then((res) => {
  //     tableData.value = res.data
  //   })
  //   .catch((err) => {
  //     !err.isError && ElMessage({ type: 'warning', message: err.message })
  //     console.log(err)
  //   })
}

// 查询目录列表
const queryMl = () => {
  const params = {
    gjz: '',
    mbpzbm: leftRowClickData.value.mbpzbm,
  }

  xtpzService
    .getQueryJnml(params)
    .then((res) => {
      rightTableData.value = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 获取模板下目录
 */
const queryMbml = () => {
  //
}

/*
 * 打开弹框
 */
// 右侧表格选择的数据
const righSelectRowData = ref<JnmlOutputDTO[]>([])
// 右侧表格选择
const rightSelectionchange = (row: JnmlOutputDTO[]) => {
  righSelectRowData.value = row
}

// 打开弹框
const cruuendNodeData = ref()
const openDialog = async (node: any) => {
  cruuendNodeData.value = node
  // 查询模板列表
  await queryMb()
  dialogVisible.value = true
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  //
  dialogVisible.value = false
}

/*
 * 保存（成功抛出刷新）
 */
const save = () => {
  if (righSelectRowData.value.length === 0) {
    ElMessage({ type: 'warning', message: '请勾选目录' })
    return
  }
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh as string,
    mlList: righSelectRowData.value.map((item: any) => {
      return {
        bz: item.bz ? (item.bz as string) : ('' as string),
        mbbh: leftRowClickData.value.mbpzbm as string,
        mbmc: leftRowClickData.value.mbpzmc as string,
        mjdm: item.mjdm ? (item.mjdm as string) : ('' as string),
        mjmc: item.mjmc ? (item.mjmc as string) : ('' as string),
        mllxdm: item.mllxdm ? (item.mllxdm as string) : ('' as string),
        mllxmc: item.mllxmc ? (item.mllxmc as string) : ('' as string),
        mlscrq: item.mlscrq ? (item.mlscrqs as string) : ('' as string),
        mlmc: item.jnmlmc as string,
        mlsxh: (cruuendNodeData.value.mlsxh as string) || '1',
        sfsx: 'Y',
        wh: item.wh ? (item.wh as string) : ('' as string),
        zrz: item.zrz ? (item.zrz as string) : ('' as string),
      }
    }),
  }
  xtpzService
    .addBatchMl(params, route.query.ajbh as string)
    .then((res) => {
      if (res.data.czjg) {
        ElMessage({ type: 'success', message: '保存成功' })
        emit('refresh')
        closeDialog()
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })

  // dialogVisible.value = false
  // ElMessage({
  //   type: 'success',
  //   message: '操作成功',
  // })
}

/* 弹框状态 */
const dialogVisible = ref(false)

/* 左边表格数据 */
const tableData = ref([])
// 右边表格数据
const rightTableData = ref()
const leftRowClickData = ref()

/* 表格被点击 */
const listChange = (row: getJnmlInputDTO) => {
  leftRowClickData.value = row
  queryMl()
}

defineExpose({
  openDialog,
})
</script>
<template>
  <!-- 目录模板弹窗 -->
  <el-dialog
    style="margin-top: 200px"
    v-model="dialogVisible"
    title="目录模板"
    width="1100px"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <div class="content">
      <div class="left">
        <el-table
          :data="tableData"
          height="250"
          style="width: 100%"
          border
          @row-click="listChange"
          highlight-current-row
        >
          <el-table-column label="模板列表">
            <template #default="scope">
              <div>{{ scope.row.mbpzmc + '-' + scope.row.mblxmc }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-table
          :data="rightTableData"
          height="250"
          style="width: 100%"
          border
          row-key="jnmlbm"
          @selection-change="rightSelectionchange"
        >
          <el-table-column type="selection" />
          <el-table-column prop="jnmlmc" label="目录名称" />
          <el-table-column prop="bz" label="备注" />
        </el-table>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    width: 40%;
  }
  .right {
    width: 58%;
  }
}
</style>
